<template>
  <view class="index-home">
    <u-loading-page :loading="isLoading"></u-loading-page>
    <view v-if="!isLoading">
      <view class="avatar" @click="toLogin">
        <view class="img"><u-avatar :src="avatarUrl" :size="60"></u-avatar></view>
        <view class="text">
          <view class="name">{{token?'Hello,'+ username:$t('index.denglu')}}</view>
          <view>{{token?$t('index.huanYing'):$t('index.kaiQi')}}</view>
        </view>
      </view>
      <view class="banner">
        <!-- <u-image src="/static/images/banner.png" height="130px" width="100%" mode="widthFix"></u-image> -->
        <u-swiper :list="swiperList"></u-swiper>
      </view>
      <view class="data-wrap">
        <view class="title">{{$t('index.shuju')}}</view>
        <view class="data-list">
          <u-row gutter="15">
            <u-col span="6">
              <view class="item first" :style="{ 'background-image': 'url('+firstImg+')' }">
                <view class="text">{{$t('index.huiyuan')}}</view>
                <view class="text text1">{{statics.cardCount}}{{$t('index.zhang')}}</view>
              </view>
            </u-col>
            <u-col span="6">
              <view class="item second" :style="{ 'background-image': 'url('+secondImg+')' }">
                <view class="text">{{$t('index.xinzengHy')}}</view>
                <view class="text text1">{{statics.userCount}}位</view>
              </view>
            </u-col>
          </u-row>
          <view class="list-two">
            <u-row gutter="15">
              <u-col span="6">
                <view class="item third" :style="{ 'background-image': 'url('+thirdImg+')' }">
                  <view class="text">{{$t('index.dingdanZs')}}</view>
                  <view class="text text1">{{statics.orderCount}}{{$t('index.dan')}}</view>
                </view>
              </u-col>
              <u-col span="6">
                <view class="item fourth" :style="{ 'background-image': 'url('+fourthImg+')' }">
                  <view class="text">{{$t('index.leijiYj')}}</view>
                  <view class="text text1">{{statics.royalty}}元</view>
                </view>
              </u-col>
            </u-row>
          </view>
        </view>
      </view>
      <view class="order-wrap">
        <view class="title">
          <view>{{$t('index.yonghuDd')}}</view>
          <view class="see-more" @click="gotoUserOrder">{{$t('index.chakanQb')}}<u-icon name="arrow-right" color="#999" size="13"></u-icon></view>
        </view>
        <view class="order-list">
          <view v-if="orderList.length > 0">
            <view class="order-item" v-for="item in orderList" :key="item.orderId">
              <view class="item-title">
                <view class="title-left">{{$t('index.dingdanBh')}}：{{item.orderNumber}}</view>
                <!--<view class="title-right">{{item.isRoyalty === 1? '已结算' :'未结算'}}</view> -->
                <view class="title-right">
                  <div>
                    <p v-if="item.isRoyalty === 1">{{$t('index.yiJieSuan')}}</p>
                    <p v-else-if="item.isRoyalty === 0">{{$t('index.weiJieSuan')}}</p>
                    <p v-else>{{$t('index.yiShiXiao')}}</p>
                  </div>
                </view>
              </view>
              <view class="item-content" v-for="(child,index) in item.detail" :key="index">
                <view class="item-img">
                  <u-image :src="child.url" height="50px" width="50px" mode="widthFix" />
                </view>
                <view class="item-text">
                  <view>{{child.goodsName}}</view>
                  <view class="plan-price">{{$t('index.yuGuYj')}}: ¥ {{child.royalty}}</view>
                </view>
                <view class="price">{{$t('index.fuKuanJe')}}: ¥ {{child.orderPrice}}</view>
              </view>
              <!--<view class="item-bottom">收货时间：{{item.createTime}}</view> -->
              <view class="item-bottom">{{item.isRoyalty === 1? $t('index.jieSuanRq'): $t('index.zhiFuSj') }}：{{item.createTime}}</view>
            </view>
          </view>
          <view class="no-data" v-else>
            <u-empty mode="data" :icon="`${imgPath}/images/index/no_order.png`" width="100px" height="100px" :text="$t('index.zanWuSj')" textColo="#75CECC" />
          </view>
        </view>
      </view>
      <tabBar />
    </view>
  </view>
</template>

<script>
import tabBar from "../../components/tabBar.vue";
export default {
  components: {
    tabBar,
  },
  computed: {
    imgPath() {
      return this.$config.baseURL + "/static/front";
    },
  },
  data() {
    return {
      isLoading: true,
      token: uni.getStorageSync("token"),
      username: "点击登录",
      avatarUrl: "",
      statics: {
        cardCount: "0",
        orderCount: "0",
        royalty: "0",
        userCount: "0",
      },
      swiperList: [],
      orderList: [],
      pageNum: 1,
      pageSize: 5,
      totalCount: 0,
      firstImg: "",
      secondImg: "",
      thirdImg: "",
      fourthImg: "",
    };
  },
  onLoad() {
    this.avatarUrl = this.imgPath + "/images/icon/avatar.png";
    this.firstImg = this.imgPath + "/images/index/hycc.png";
    this.secondImg = this.imgPath + "/images/index/ddzs.png";
    this.thirdImg = this.imgPath + "/images/index/ddzs.png";
    this.fourthImg = this.imgPath + "/images/index/ljyj.png";
    this.getlunboList();
  },
  onShow() {
    const TOKEN = uni.getStorageSync("token");
    if (TOKEN) {
      this.getUserInfo();
      this.getStaticsData();
      this.getOrderList();
    }else {
      this.isLoading = false;
    }
  },
  onReady() {
    // this.$i18n.locale = 'zh-Hant'
    console.log(uni.getLocale());
    uni.setNavigationBarTitle({
      title: this.$t("page.shouye"),
    });
  },
  onReachBottom() {
    const TOKEN = uni.getStorageSync("token");
    if (!TOKEN) {
      return false;
    }
    //上拉到底时触发，onReachBottom函数跟生命周期同级
    if (this.orderList.length < this.totalCount) {
      this.pageNum++; //当前条数小于总条数 则增加请求页数
      this.getOrderList(); //调用加载数据方法
    } else {
      uni.$u.toast(this.$t("index.yiJiaZaiQb"));
    }
  },
  methods: {
    /**
     * 获取用户信息
     */
    async getUserInfo() {
      const res = await this.$api.getPersonalInformation({}).catch(() => {
        this.isLoading = false;
      })
      if (res?.code === 0) {
        this.username = res.data.username;
        res.data.avatarUrl && (this.avatarUrl = res.data.avatarUrl);
      }
      this.isLoading = false;
    },
    /**
     * 获取数据总况
     */
    async getStaticsData() {
      const res = await this.$api.statistics({});
      if (res.code === 0 && res.data) {
        for (let key in this.statics) {
          this.statics[key] = res.data[key] || 0;
        }
      }
    },
    /**
     * 轮播图
     */
    async getlunboList() {
      const res = await this.$api.lunboList({});
      if (res.code === 0 && res.data) {
        this.swiperList = res.data;
      }
    },

    /**
     * 用户订单
     */
    async getOrderList() {
      const res = await this.$api.orderList({
        orderStatus: 2,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      if (res.code === 0 && res.data) {
        this.orderList = [...this.orderList, ...res.data.list];
        this.totalCount = res.data.totalCount;
      } else {
        this.orderList = [];
      }
    },
    toLogin() {
      const TOKEN = uni.getStorageSync("token");
      if (!TOKEN) {
        uni.reLaunch({
          url: "/pages/register/regist_index",
        });
      }
    },
    gotoUserOrder() {
      uni.navigateTo({ url: "/pages/user_order/user_order" });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.index-home {
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(
    180deg,
    #51c7c5 0%,
    #ffffff 41%,
    #f2f2f2 43%,
    #f2f2f2 63%,
    #f2f2f2 100%
  );
  .avatar {
    height: 50px;
    overflow: hidden;
    padding: 30px 20px;
    display: flex;
    align-items: center;
    .img {
      width: 60px;
      margin-right: 10px;
    }
    .text {
      color: #fff;
      font-size: 14px;
      .name {
        font-weight: bold;
        font-size: 16px;
      }
    }
  }
  .banner {
    height: 130px;
    overflow: hidden;
    width: calc(100% - 40px);
    margin: 0 auto;
    border-radius: 10px;
  }
  .data-wrap {
    margin-top: 20px;
    padding: 0 20px;
    overflow: hidden;
    .title {
      font-size: 16px;
      color: #333;
      line-height: 40px;
      height: 40px;
      overflow: hidden;
    }
    .data-list {
      overflow: hidden;
      .item {
        height: 100px;
        overflow: hidden;
        width: 100%;
        border-radius: 10px;
        .text {
          padding: 20px 0 0 30px;
          line-height: 30px;
        }
        .text1 {
          padding-top: 0;
        }
      }
      .first {
        background-size: 120% 120%;
        background-position: center;
        background-repeat: no-repeat;
      }
      .second {
        background-size: 120% 120%;
        background-position: center;
        background-repeat: no-repeat;
      }
      .third {
        background-size: 120% 120%;
        background-position: center;
        background-repeat: no-repeat;
      }
      .fourth {
        background-size: 120% 120%;
        background-position: center;
        background-repeat: no-repeat;
      }
      .list-two {
        margin-top: 15px;
      }
    }
  }
  .order-wrap {
    padding: 0 20px 20px;
    overflow: hidden;
    .title {
      display: flex;
      justify-content: space-between;
      height: 40px;
      align-items: center;
      .see-more {
        color: #999;
        font-size: 14px;
        display: flex;
      }
    }
    .order-list {
      overflow: hidden;
      .order-item {
        overflow: hidden;
        background-color: #fff;
        border-radius: 8px;
        margin-top: 20px;
        padding: 0 20px;
        .item-title {
          display: flex;
          height: 60px;
          overflow: hidden;
          align-items: center;
          justify-content: space-between;
          .title-left {
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .title-right {
            color: #75cecc;
          }
        }
        .item-content {
          overflow: hidden;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ddd;
          padding: 10px 0 20px;
          font-size: 14px;
          .item-img {
            width: 50px;
            overflow: hidden;
          }
          .item-text {
            flex: 1;
            padding: 0 10px;
            .plan-price {
              color: #ff3c2b;
            }
          }
        }
        .item-bottom {
          font-size: 14px;
          color: #999;
          height: 39px;
          line-height: 39px;
        }
      }
      .no-data {
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        height: 160px;
        margin-top: 20px;
      }
    }
  }
}
</style>
